<template>
  <div>
    <el-tabs type="card">
      <el-tab-pane :label="group.name"
                   v-for="(group,groupIndex) in specParams"
                   :key="groupIndex">
        <el-row v-if="type == 'generic' && group.genericParams.length != 0">
          <el-tag style="width:100%;">基本属性</el-tag>

          <el-row>
            <el-col :span="5"
                    :offset="1"
                    v-for="(specParam,specParamIndex) in group.genericParams"
                    :key="specParamIndex">
              <el-row> {{specParam.name}}</el-row>
              <el-row>
                <el-input v-model="specParam.value"></el-input>
              </el-row>
            </el-col>
          </el-row>
        </el-row>
        <el-row v-if="type == 'special' && group.specialParams.length != 0">
          <el-tag style="width:100%;">SKU属性</el-tag>
          <el-row>
            <el-col :span="11"
                    :offset="1"
                    v-for="(specParam,specParamIndex) in group.specialParams"
                    :key="specParamIndex">
              <el-row> {{specParam.name}}</el-row>
              <el-row>
                <template v-if="specParam.options && specParam.options.length > 0">
                  <el-checkbox-group v-model="specParam.value">
                    <el-checkbox v-for="option in specParam.options"
                                 :label="option"
                                 :key="option">{{option}}</el-checkbox>
                  </el-checkbox-group>
                </template>
                <template v-else>
                  <avue-array v-model="specParam.value"
                              placeholder="请输入SKU"></avue-array>
                </template>
              </el-row>
            </el-col>
          </el-row>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

export default {
  name: 'specParams',
  props: {
    type: {
      type: String
    },
    params: {
      type: Array,
      default () {
        return []
      }
    }
  },
  data () {
    return {
      specParams: [],
    }
  },
  watch: {
    params: {
      handler (newValue, oldValue) {
        let tempSpecParams = [...newValue]
        let tempParams = []
        for (let i = 0, len = tempSpecParams.length; i < len; i++) {
          let tempSpecParam = { ...tempSpecParams[i] }
          if (this.type == 'generic') {
            let tempGenericParams = []
            for (let g = 0, gLen = tempSpecParam.genericParams.length; g < gLen; g++) {
              let tempGenericParam = { ...tempSpecParam.genericParams[g] }
              this.$set(tempGenericParam, 'value', '其他')
              tempGenericParams.push(tempGenericParam)
            }
            this.$set(tempSpecParam, 'genericParams', tempGenericParams)
            if (tempGenericParams.length != 0) {
              tempParams.push(tempSpecParam)
            }
          }
          if (this.type == 'special') {
            let tempSpecialParams = []
            for (let s = 0, sLen = tempSpecParam.specialParams.length; s < sLen; s++) {
              let tempSpecialParam = { ...tempSpecParam.specialParams[s] }
              this.$set(tempSpecialParam, 'value', [])
              tempSpecialParams.push(tempSpecialParam)
            }
            this.$set(tempSpecParam, 'specialParams', tempSpecialParams)
            if (tempSpecialParams.length != 0) {
              tempParams.push(tempSpecParam)
            }
          }
        }
        this.specParams = [...tempParams]
      },
      deep: true //深度监听
    },
    specParams: {
      handler (newValue, oldValue) {
        this.specParamsValue(newValue)
      },
      deep: true //深度监听
    }
  },
  methods: {
    specParamsValue (value) {
      let temp = [...value]
      let tempGenericParams = []
      let tempSpecialParams = []
      for (let i = 0, l = temp.length; i < l; i++) {
        let tempSpecParam = { ...temp[i] }
        if (this.type == 'generic') {
          for (let g = 0, gLen = tempSpecParam.genericParams.length; g < gLen; g++) {
            let tempGenericParam = { ...tempSpecParam.genericParams[g] }
            tempGenericParams.push(tempGenericParam)
          }
        }
        if (this.type == 'special') {
          for (let s = 0, sLen = tempSpecParam.specialParams.length; s < sLen; s++) {
            let tempSpecialParam = { ...tempSpecParam.specialParams[s] }
            // 过滤属性选项值为空的值选项
            tempSpecialParam['value'] = tempSpecialParam['value'].filter(item => item.length > 0)
            // 排除没有选项的属性
            if (tempSpecialParam['value'].length > 0) {
              tempSpecialParams.push(tempSpecialParam)
            }
          }
        }
      }
      let param = { type: this.type }
      if (this.type == 'generic') {
        this.$set(param, 'generic', JSON.stringify(tempGenericParams))
      }
      if (this.type == 'special') {
        this.$set(param, 'special', JSON.stringify(tempSpecialParams))
        this.$set(param, 'sku', JSON.stringify(this.generateSku(tempSpecialParams)))
      }
      this.$emit("emitSpecParams", param)
    },
    generateSku (list) {
      // 过滤掉没有值的选项
      let filterList = list.filter(item => item.value.length > 0)
      let result = filterList.reduce((acc, special, ii) => {
        let id = special['id'], value = special['value']
        if (ii > 0) {
          let group = acc.map(item => value.map((val, ai) => {
            return {
              ...item,
              [id]: val,
              details: Object.assign(item['details'], {
                [id]: { ...special }
              }),
              index: Object.assign(item['index'], {
                [id]: ai
              })
            }
          }))
          return [].concat(...group);
        }
        return value.map((item, ai) => {
          return {
            [id]: item,
            details: {
              [id]: { ...special }
            },
            index: {
              [id]: ai
            }
          }
        })
      }, [])
      return result
    },
  }
}
</script>